<template>
  <div class="battle-scene">
    <scene-layout />
    <operation-layout />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, provide, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { DispatchResult, isInitNumber } from '../../../tools'

import sceneLayout from './sceneLayout.vue'
import operationLayout from './operationLayout.vue'
import BattleStore from './battleStore'
import Api from '../../../components/tools/api'
import Message from '../../../components/message/index'

defineOptions({
  name: 'game-battle-scene'
})

const listenKey = 'game-data-listen'

const instance = getCurrentInstance()
const router = useRouter()
const idValue = router.currentRoute.value.query.id //文件id

const store = ref(new BattleStore())
provide('store', store)

const startBattle = async () => {
  try {
    await Api.listen(
      listenKey,
      {
        value: idValue
      },
      (data: any) => {
        // 格式 { startIndex:42, lastIndex:43, list:[["run",{pointX:12,pointY:42}]]}
        // 获得动画执行序列，为数组的格式，依次执行显示
        console.log('listen_Key', data)
      }
    )
  } catch (error) {
    console.log(error)
  }
}

const syncBattle = async () => {
  try {
    let result = await Api.send(`/game/syncBattle`, {
      startIndex: 0
    })
    DispatchResult(result, {
      onSuccess: (data: any) => {
        const { id } = data
        if (isInitNumber(id)) {
          router.replace(`/game/${id}/base-scene`)
        } else {
          Message({ message: '游戏创建失败', type: 'error' })
        }
      },
      onError: (_data: any, message: string) => {
        Message({ message, type: 'error' })
      }
    })
  } catch (error) {
    console.log(error)
  }
}
const closeBattle = async () => {
  try {
    await Api.closeListen(listenKey)
  } catch (error) {
    console.log(error)
  }
}

const exitAction = () => router.back()

onMounted(() => {
  startBattle()
})
</script>

<style lang="scss">
.battle-scene {
  flex: 1;
}
</style>
